<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>二次首页</title>
    <link rel="stylesheet" href="./plugin/jq-weui/css/weui.min.css">
    <link rel="stylesheet" href="./plugin/jq-weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <div class="box">
        <a href="javascript:;" class="choose-btn open-popup" data-target="#half">选择其他户号</a>
        <div class="flex-box">
            <div class="flex-group">
                <label>缴费单位:</label>
                <p>长治市城镇供水集团有限公司</p>
            </div>
            <div class="flex-group">
                <label>缴费户号:</label>
                <p>187664333</p>
            </div>
            <div class="flex-group">
                <label>用户名称:</label>
                <p>张*三</p>
            </div>
            <div class="flex-group">
                <label>用户地址:</label>
                <p>人民路38号宏碁小区26号楼2单元西户</p>
            </div> 
        </div>
        <div class="flex-group money-box">
            <label>缴费金额</label>
            <input  type="number" pattern="[0-9]*" placeholder="请输入缴费金额"/>
        </div>
        <a href="./success.html" class="weui-btn weui-btn_primary">立即缴费</a>
        <a href="./history.html" class="weui-btn weui-btn_default">缴费历史</a>
    </div>
    <!-- 选择户号弹窗 -->
    <div id="half" class='weui-popup__container popup-bottom'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
          <div class="toolbar">
            <div class="toolbar-inner">
            <a href="javascript:;" class="picker-button close-popup">取消</a>
            <h1 class="title">请选择户号</h1>
            <a href="javascript:;" class="picker-button close-popup">确定</a>
            </div>
          </div>
          <div class="modal-content">
            <div class="weui-cells weui-cells_radio num-list">
                <label class="weui-cell weui-check__label" for="x11">
                  <div class="weui-cell__bd">
                    <p> <span class="name">张*三</span> 
                        <i class="num">187664333</i></p>
                    <p class="address">人民路38号宏碁小区26号楼2单元西户</p>
                  </div>
                  <div class="weui-cell__ft">
                    <input type="radio" class="weui-check" name="radio1" id="x11">
                    <span class="weui-icon-checked"></span>
                  </div>
                </label>
                <label class="weui-cell weui-check__label" for="x12">
                  <div class="weui-cell__bd">
                    <p> <span class="name">张*三</span> 
                        <i class="num">187664333</i></p>
                    <p class="address">人民路38号宏碁小区26号楼2单元西户</p>
                  </div>
                  <div class="weui-cell__ft">
                    <input type="radio" name="radio1" class="weui-check" id="x12">
                    <span class="weui-icon-checked"></span>
                  </div>
                </label>
                <label class="weui-cell weui-check__label" for="x13">
                    <div class="weui-cell__bd">
                        <p> <span class="name">张*三</span> 
                            <i class="num">187664333</i></p>
                        <p class="address">人民路38号宏碁小区26号楼2单元西户</p>
                    </div>
                    <div class="weui-cell__ft">
                      <input type="radio" name="radio1" class="weui-check" id="x13">
                      <span class="weui-icon-checked"></span>
                    </div>
                  </label>
                  <label class="weui-cell weui-check__label" for="x14">
                    <div class="weui-cell__bd">
                        <p> <span class="name">张*三</span> 
                            <i class="num">187664333</i></p>
                        <p class="address">人民路38号宏碁小区26号楼2单元西户</p>
                    </div>
                    <div class="weui-cell__ft">
                      <input type="radio" name="radio1" class="weui-check" id="x14" checked="checked">
                      <span class="weui-icon-checked"></span>
                    </div>
                  </label>
                  <label class="weui-cell weui-check__label" for="x15">
                    <div class="weui-cell__bd">
                        <p> <span class="name">张*三</span> 
                            <i class="num">187664333</i></p>
                        <p class="address">人民路38号宏碁小区26号楼2单元西户</p>
                    </div>
                    <div class="weui-cell__ft">
                      <input type="radio" name="radio1" class="weui-check" id="x15" checked="checked">
                      <span class="weui-icon-checked"></span>
                    </div>
                  </label>
                  <label class="weui-cell weui-check__label" for="x16">
                    <div class="weui-cell__bd">
                        <p> <span class="name">张*三</span> 
                            <i class="num">187664333</i></p>
                        <p class="address">人民路38号宏碁小区26号楼2单元西户</p>
                    </div>
                    <div class="weui-cell__ft">
                      <input type="radio" name="radio1" class="weui-check" id="x16" checked="checked">
                      <span class="weui-icon-checked"></span>
                    </div>
                  </label>
              </div>
          </div>
        </div>
      </div>
    <script src="./plugin/jquery-2.1.4.js"></script>
    <script src="./plugin/jq-weui/js/jquery-weui.min.js"></script>
    <script>
        $(document).on("open", ".weui-popup-modal", function() {
            console.log("open popup");
        }).on("close", ".weui-popup-modal", function() {
            console.log("close popup");
        });

    </script>
</body>
</html>